<script setup>
import { userApi } from '@/api'
import { useUserStore } from '@/stores'
import {
  User,
  Unlock,
  Postcard,
  DArrowRight,
  DArrowLeft
} from '@element-plus/icons-vue'
import { useLayoutStore } from '@/stores'

const layoutStore = useLayoutStore()
const isCollapse = computed(() => layoutStore.isCollapse)

const router = useRouter()

const userStore = useUserStore()
async function logout() {
  await userApi.logout()
  userStore.clear()
  ElMessage.success('退出成功')
  router.push('/login')
}
</script>

<template>
  <header>
    <div class="h-16 border-b px-4 backdrop-blur">
      <div class="flex h-full items-center">
        <div
          class="truncate transition-[width] duration-300"
          :class="isCollapse ? 'w-10' : 'w-52'"
        >
          深圳虚线体育有限公司
        </div>

        <el-button
          class="ml-6"
          :class="isCollapse ? 'left-1/2 -translate-x-1/2 ' : 'right-4'"
          :icon="isCollapse ? DArrowRight : DArrowLeft"
          link
          @click="layoutStore.toggleCollapse()"
        />

        <ul class="ml-auto flex items-center gap-x-3">
          <li class="hidden sm:block">
            <el-button link :icon="User">李冬宝</el-button>
          </li>
          <li class="hidden sm:block">
            <el-button link :icon="Postcard">13600136000</el-button>
          </li>
          <li>
            <el-button link :icon="Unlock" @click="logout">退出登录</el-button>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
